<template>
  <div class="user">
    <Header />
    <div class="Breadcrumbs">
      <Breadcrumb />
    </div>
    <div class="user_box">
      <el-main>
        <el-row>
          <el-col class="item_mr" :lg="24">
            <div class="user_logo_box">
              <div>
                <img class="user_logo" v-if="edit.thumb" :src="edit.thumb" />
                <img class="user_logo" v-else src="111" />
              </div>
              <el-upload
                :show-file-list="false"
                :on-success="onSuccessLogo"
                :on-error="onErrorLogo"
                :action="`${VUE_APP_BASE_API}/v1/index/upload`"
              >
                <p class="context">修改企业头像</p>
              </el-upload>
            </div>
          </el-col>
          <el-col class="item_mr" :lg="24">
            <div class="user_item">
              <div class="context">公司名称</div>
              <el-input
                v-model="edit.company"
                readonly
                placeholder="请输入内容"
              ></el-input>
            </div>
          </el-col>
          <!-- <el-col class="item_mr" :lg="24">
            <div class="user_item">
              <div class="context">登录密码</div>
              <el-input
                v-model="edit.password"
                show-password
                placeholder="请输入内容"
              >
                <template @click="editPassWord" slot="append"
                  >修改密码</template
                >
              </el-input>
            </div>
          </el-col> -->
          <el-col class="item_mr" :lg="24">
            <div class="user_item">
              <div class="user_item_s">
                <div class="context">联系人姓名</div>
                <el-input
                  v-model="edit.username"
                  placeholder="请输入内容"
                ></el-input>
              </div>
              <div class="user_item_s">
                <div class="context last">联系人职位</div>
                <el-input
                  v-model="edit.position"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </div>
          </el-col>
          <el-col class="item_mr">
            <div class="user_item">
              <div class="user_item_s">
                <div class="context">联系人手机号</div>
                <el-input
                  v-model="edit.mobile"
                  placeholder="请输入内容"
                ></el-input>
              </div>
              <div class="user_item_s">
                <div class="context last">联系人邮箱</div>
                <el-input
                  v-model="edit.email"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-row class="mrBor">
          <el-col :lg="24">
            <p class="context zy">营业执照</p>
            <div class="license_box">
              <el-upload
                ref="upload"
                :on-success="onSuccess"
                :on-error="onError"
                :show-file-list="false"
                :action="`${VUE_APP_BASE_API}/v1/index/upload`"
              >
                <img class="avatar" v-if="edit.business" :src="edit.business" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-col>
          <el-col style="margin-top: 38px" :lg="24">
            <el-button
              type="button"
              @click="back"
              class="context"
              style="width: 145px; background-color: #fff"
              >取消</el-button
            >
            <el-button
              type="button"
              @click="save"
              class="pubBtn3"
              style="margin-left: 40px; width: 145px"
              >保存</el-button
            >
          </el-col>
        </el-row>
      </el-main>
    </div>
    <Service v-if="this.$route.meta.serve" />
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { getNowUser, editUser } from "@/api";
import { VUE_APP_BASE_API } from "@/config.js";
import Header from "@/components/Header";
import Breadcrumb from "@/components/Breadcrumb";
import Service from "@/components/Service";
export default {
  components: {
    Header,
    Breadcrumb,
    Service,
  },
  data() {
    return {
      VUE_APP_BASE_API,
      imageUrl: "",
      imageLogo: "",
      edit: {
        company: "",
        username: "",
        position: "",
        mobile: "",
        email: "",
        business: "",
        thumb: "",
        password: "",
      },
    };
  },
  async mounted() {
    try {
      this.edit = await getNowUser();
      // console.log(this.edit.thumb);
    } catch (e) {
      this.$message.error(e.message);
    }
  },
  methods: {
    back() {
      this.$router.back();
    },
    onSuccess(response, file, fileList) {
      if (response) {
        this.edit.business = response.data.url;
        this.$nextTick(() => {
          this.edit.business = response.data.url;
        });
        this.$message.success("上传成功");
      }
    },
    onError(err) {
      if (err) {
        this.$message.error("上传失败");
      }
    },
    onSuccessLogo(response, file, fileList) {
      if (response) {
        this.edit.thumb = response.data.url;
        this.$nextTick(() => {
          this.edit.thumb = response.data.url;
        });
        this.$message.success("上传成功");
      }
    },
    onErrorLogo(err) {
      if (err) {
        this.$message.error("上传失败");
      }
    },
    async save() {
      try {
        const { username, position, mobile, email, business, thumb, password } =
          this.edit;
        await editUser({
          username,
          position,
          mobile,
          email,
          business,
          thumb,
          password,
        });
        this.$message.success("修改成功");
        this.$router.back();
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async editPassWord() {
      try {
        this.$message.success("修改成功");
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style scoped lang="less">
.Breadcrumbs {
  background-color: #f4f5f7;
  width: 100%;
  margin-top: 100px;
  padding-left: 320px;
  margin-left: 0 !important;
}

.item_mr {
  margin-bottom: 20px;
}

.user_box {
  width: 600px;
  margin-left: 320px;

  .el-main {
    margin: 0;
    padding: 30px 0;
  }

  .user_logo_box {
    display: flex;
    align-items: center;

    .user_logo {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: darkred;
    }

    .context {
      color: #34bf92;
      margin-left: 23px;
    }
  }

  .user_item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .context {
      width: 120px;
      font-weight: 400;
    }

    .user_item_s {
      display: flex;
      align-items: center;

      .context {
        width: 150px;
        font-weight: 400;
      }

      .last {
        margin-left: 40px;
      }
    }
  }
}
.license_box {
  width: 100%;
  height: 257px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(230, 233, 240, 1);
  border-radius: 5px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  overflow: hidden;
  .avatar {
    display: block;
    width: 100%;
    height: 257px;
    object-fit: contain;
    overflow: hidden;
  }
}
.avatar-uploader-icon {
  font-size: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mrBor {
  border-top: 1px solid #e7eaf0;
  padding-top: 25px;
  margin-top: 25px;
  .zy {
    margin-bottom: 15px;
  }
}
</style>
